<template>
  <div class="login-container" @keydown.enter="handleLogin" tabindex="0">
    <div class="login-title">登录环保小助手</div>
    <div class="login-form">
      <van-cell-group>
        <van-field
          v-model="username"
          placeholder="请输入账号"
          left-icon="user"
          clearable
          @input="password = ''"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入密码"
          show-password
          left-icon="lock"
          clearable
        />
      </van-cell-group>

      <div class="login-button">
        <van-button block type="primary" size="small" @click="handleLogin">
          登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useUserStore } from "@/store/modules/user.js";
import Cookies from "js-cookie";
import { lStorage } from "@/utils/storage";
import { login } from "@/api/user";
import { useRouter } from "vue-router";
import { showNotify } from "vant";

import useInstructionStore from "@/store/modules/instructionList.js";
import { useWarnPollingStore } from "@/store/modules/warnPolling.js";

const router = useRouter();
const username = ref(Cookies.get("username") || "");
const password = ref(Cookies.get("password") || "");

const userStore = useUserStore();

// 登录逻辑
const handleLogin = async () => {
  console.log("我被触发了");
  if (!username.value || !password.value) {
    showNotify({ type: "warning", message: "请输入账号和密码！" });
    return;
  }

  try {
    const data = await login({
      username: username.value,
      password: password.value
    });

    if (data.code === 200) {
      // 保存用户信息和 Token
      Cookies.set("token", data.token, {
        expires: 7
      });

      Cookies.set("username", username.value, {
        expires: 7
      });
      Cookies.set("password", password.value, {
        expires: 7
      });

      lStorage.set("userInfo", data.userInfo);
      userStore.setUserInfo({
        username: username.value,
        token: data.token
      });
      userStore.setToken(data.token);
      showNotify({ type: "success", message: "登录成功" });
      // 跳转到首页
      router.push("/");

      useInstructionStore().getData();
      if (useWarnPollingStore().pollTimer === null) {
        useWarnPollingStore().startPolling();
      }
    } else {
      showNotify({ type: "danger", message: data.msg });
    }
  } catch (error) {
    console.error("登录出错:", error);
    showNotify({ type: "danger", message: "登录失败，请稍后重试" });
  }
};

// 全局监听回车键
const handleEnterKey = event => {
  if (event.key === "Enter") {
    handleLogin(); // 直接调用 handleLogin 方法
  }
};
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .login-title {
    margin: 16px 0;
    font-weight: bold;
  }

  .login-form {
    width: calc(80% - 40px);
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;

    .login-button {
      margin-top: 20px;
    }
  }
}
</style>
